<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>



</body>
<script>
    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");
    var deleteList = document.getElementsByClassName("delete");
    var deleteAll = document.getElementById("deleteAll");
    var selectedTotal = document.getElementById("selectedTotal");
    var priceTotal = document.getElementById("priceTotal");

    var tbody = document.querySelector("#cartTable tbody")


    // 页面加载时 请求数据 渲染购物车
    var xhr = new XMLHttpRequest();

    xhr.open("get", "../data/car.json", true);

    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            console.log(result);
            var data = JSON.parse(result);
            console.log(data);

            var { status, message, list } = data;
            if (status) {
                var html = "";
                list.forEach(({ goodsId, goodsName, goodsMsg, goodsImg, goodsPrice, buyNum }) => {
                    html += `<tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods">
                        <img src="${goodsImg}" alt="" />
                        <span>${goodsName}</span>
                    </td>
                    <td class="price">${goodsPrice.toFixed(2)}</td>
                    <td class="count"><span class="reduce">${buyNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(goodsPrice * buyNum).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
                })
                tbody.innerHTML = html; // html结构放到页面 => 回流 =>生成结构

                // 生成之后 

                // 全选
                // 点击全选  所有的单选跟随全选的状态
                checkAll.onclick = function () {
                    // 所有的单选跟随全选的状态
                    // 1. 获取全选的状态
                    // 2. 所有单选跟随全选的状态

                    var status = checkAll.checked;
                    console.log(status);

                    for (var i = 0; i < checkOneList.length; i++) {
                        var checkOne = checkOneList[i];
                        checkOne.checked = status;
                    }
                    getTotal();
                }

                // 反选: 
                // 每次点击单选 => 判断所有的单选是否全都被选中 => 全都选中=> 反选,否则=>不反选
                for (let i = 0; i < checkOneList.length; i++) {  //循环绑定事件(页面加载时执行)
                    var checkOne = checkOneList[i];
                    checkOne.onclick = function () {
                        isAllChecked();
                        getTotal();

                        /*  var sum = 0; // 被选中的商品的数量
                         var allPrice = 0; // 被选中的商品的总价格
             
                         // 找到所有选中状态的单选  => 通过它找到该商品对应的数量和小计  => 累加
                         for (let j = 0; j < checkOneList.length; j++) {
                             var item = checkOneList[j];
                             if (item.checked) {
                                 var tr = item.parentElement.parentElement;  // 选中状态的单选 => tr
                                 var countInput = tr.getElementsByClassName("count-input")[0];
                                 var subtotalTd = tr.getElementsByClassName("subtotal")[0];
                                 // console.log(countInput, subtotalTd);
             
                                 var num = countInput.value * 1;
                                 var subtotal = subtotalTd.textContent * 1;
             
                                 sum += num;
                                 allPrice += subtotal;
             
                             }
                         }
             
                         selectedTotal.textContent = sum;
                         priceTotal.textContent = allPrice.toFixed(2); */
                    }
                }

                // 点击加号
                // 点击 “+”     输入框  数量 加一 
                //             小计更新  =  单价*数量
                //             减号按钮的 “-”  出现
                for (let i = 0; i < addList.length; i++) {
                    let add = addList[i];
                    add.onclick = function () {
                        // console.log(this);

                        // a. 输入框  数量 加一 
                        var countInput = this.previousElementSibling;
                        var num = countInput.value; // countInput的value值  num =  "1"
                        num++;
                        countInput.value = num;
                        // countInput.value++;

                        // b. 小计更新  =  单价*数量
                        var countTd = this.parentElement.previousElementSibling;
                        var subtotalTd = this.parentElement.nextElementSibling;

                        // 注意:如果有单位  "5999.88元"  "¥5999.88"  => 处理(去单位)
                        var price = countTd.textContent;

                        var subtotal = price * num;

                        subtotalTd.textContent = subtotal.toFixed(2);

                        // 3. 减号按钮的 “-”  出现
                        var reduce = countInput.previousElementSibling;
                        reduce.textContent = "-";

                        getTotal();


                    }
                }


                // 点击减号
                // 点击减号    输入框  数量 减一   （细节要求  数量为1的时候  不再减）
                //            小计更新  =  单价*数量
                //            减之前  判断  如果数量为1  不能减     return false
                //            减之后  判断  如果数量为1  减号按钮的 “-” 消失

                for (let i = 0; i < reduceList.length; i++) {
                    let reduce = reduceList[i];
                    reduce.onclick = function () {
                        console.log(this);

                        // a. 输入框  数量 减一 
                        var countInput = this.nextElementSibling;
                        var num = countInput.value;
                        // c .减之前  判断  如果数量为1  不能减     return false
                        if (num <= 1) { return false };

                        num--; //自减

                        //d. 减之后  判断  如果数量为1(2切为1)  减号按钮的 “-” 消失
                        if (num <= 1) {
                            this.textContent = "";
                        }

                        countInput.value = num;

                        var countTd = this.parentElement.previousElementSibling;
                        var subtotalTd = this.parentElement.nextElementSibling;

                        // b. 小计更新
                        // 注意:如果有单位  "5999.88元"  "¥5999.88"  => 处理(去单位)
                        var price = countTd.textContent;

                        var subtotal = price * num;

                        subtotalTd.textContent = subtotal.toFixed(2);

                        getTotal();
                    }
                }

                // 删除的细节
                // 1. 每次删除之后 => 剩余的商品有可能全部被选中 => 反选
                // 2. 商品全部删除之后 => 取消反选(但是由于every用的是假设法 如果数组为[] 默认返回true)  
                //    怎么解决? 添加判断如果商品数量为0 => 取消反选
                // var flag = true; //假设所有的单选框 都被选中 (假设法第二种应用)
                // for (var j = 0; j < checkOneList.length; j++) { // 计数统计(每次点击单选)
                //     var item = checkOneList[j];
                //     if (item.checked == false) { // 如果存在未被选中的元素 => 推翻假设
                //         flag = false;
                //         break;
                //     }
                // }
                // checkAll.checked = flag;

                // 单删: 
                for (let i = 0; i < deleteList.length; i++) {
                    let del = deleteList[i];
                    del.onclick = function () {
                        // console.log(this);
                        if (confirm("是否删除该商品?")) {
                            var tr = this.parentElement.parentElement;
                            tr.remove();

                            // 1. 每次删除之后 => 剩余的商品有可能全部被选中 => 反选
                            // 2. 商品全部删除之后 => 取消反选(但是由于every用的是假设法 如果数组为[] 默认返回true)  
                            //    怎么解决? 添加判断如果商品数量为0 => 取消反选

                            isAllChecked();
                            getTotal();
                        }
                    }
                }


                // 多删   判断单选框是否被选中(checked)     选中就删除 该行

                // checkOneList会随着页面 同类名元素的增加或减少自动更新集合 => 当前面的元素被删除之后 => 集合更新 => 后面的元素占据前面的位置 => 删除出现漏网之鱼

                // 怎么解决?
                // 1. 倒着删
                // 2. 本次删除之后 下次还从当前位置删

                //          下标:     0          1       2       3
                // checkOneList：  [checkOne,checkOne,checkOne,checkOne]
                deleteAll.onclick = function () {
                    // debugger;
                    for (var j = 0; j < checkOneList.length; j++) {
                        var checkOne = checkOneList[j];
                        if (checkOne.checked) {
                            var tr = checkOne.parentElement.parentElement;
                            tr.remove();
                            j--;
                            console.log(checkOneList);
                        }
                    }

                    // 2. 商品全部删除之后 => 取消反选(但是由于every用的是假设法 如果数组为[] 默认返回true)  
                    //    怎么解决? 添加判断如果商品数量为0 => 取消反选

                    isAllChecked();
                    getTotal();
                }


            }


        }
    }


    // ajax动态生成和绑定事件的问题
    // 解析: ajax是异步的,在主线程执行时先执行同步任务 => 获取元素,绑定事件 => 此时ajax还未请求成功,并不会动态生成商品数据  =>  单选 加减 单删 都没有生成 => 获取的集合[]  并未给任何元素绑定事件
    console.log(checkOneList);
    console.log(addList);
    console.log(reduceList);
    console.log(deleteList);


    // 解决方法:
    // 1. 老赖行为  => 等数据请求成功 页面动态生成之后 在获取元素绑定事件





    function isAllChecked() {
        // 1. 每次删除之后 => 剩余的商品有可能全部被选中 => 反选
        // 2. 商品全部删除之后 => 取消反选(但是由于every用的是假设法 如果数组为[] 默认返回true)  
        //    怎么解决? 添加判断如果商品数量为0 => 取消反选

        var flag = Array.from(checkOneList).every(function (item, index, array) {
            return item.checked == true;
        })
        console.log(flag);
        checkAll.checked = (checkOneList.length > 0 ? flag : false);
    }

    function getTotal() {
        var sum = 0; // 被选中的商品的数量
        var allPrice = 0; // 被选中的商品的总价格

        // 找到所有选中状态的单选  => 通过它找到该商品对应的数量和小计  => 累加
        for (let j = 0; j < checkOneList.length; j++) {
            var item = checkOneList[j];
            if (item.checked) {
                var tr = item.parentElement.parentElement;  // 选中状态的单选 => tr
                var countInput = tr.getElementsByClassName("count-input")[0];
                var subtotalTd = tr.getElementsByClassName("subtotal")[0];
                // console.log(countInput, subtotalTd);

                var num = countInput.value * 1;
                var subtotal = subtotalTd.textContent * 1;

                sum += num;
                allPrice += subtotal;

            }
        }

        selectedTotal.textContent = sum;
        priceTotal.textContent = allPrice.toFixed(2);
    }
</script>

</html>